<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#1877F2"
		:circular="true" class="bannar-box ">
		<swiper-item v-for="item in bannarData" :key="item._id">
			<image :src="item.imagePath" />
		</swiper-item>
	</swiper>
	<view></view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getHomeBannerApi
	} from '../../api/home';
	const bannarData = ref([])

	onMounted(() => {
		getBannerData()
	})
	const getBannerData = () => {
		getHomeBannerApi().then(res => {
			// console.log(res);
			if (res.code == 200) {
				bannarData.value = res.data.rows
			}
		})
	}
</script>

<style scoped lang="scss">
	.bannar-box {
		height: 354rpx;
		margin-top: 24rpx;
		margin-bottom: 20rpx;

		image {
			width: 100%;
			height: 304rpx;
		}
	}
</style>